<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{message}}</div>
			
			<p v-if="see">你看到的是第一个p</p>
			<p v-else>你看到的是第二个p</p>
			
			<div>
				<a v-bind:[attributenames]="url">123</a>
				<a v-on:[eventname]='doSomething'>点击试试</a>
			</div>
			
			<ul>
				<li v-for="todo in todos">{{todo.tex}}---{{todo.id}}</li>
			</ul>
			
			<button @click="addLi">添加+反转消息</button></br>
			<div>{{message}}</div>
			<input type="text" v-model="message"/>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				message:'这是新消息',
				see:false,
				attributenames:'href',
				url:'http://baidu.com',
				eventname:'click',
				todos:[
				{tex:'学习一次vue'},
				{tex:'学习两次vue'},
				{tex:'学习三次vue'}
				]
			},
			methods:{
				addLi:function(){
					this.todos.push({tex:'学习vue多次'});
					this.message = this.message.split('').reverse().join('');
				},
				doSomething:function(){
					alert('设置动态属性成功了')
				}
			}
		})
	</script>
</html>
